<template>
  <div class="flex-center" :style="{
    minHeight: '800px',
    backgroundImage: `url(${eventDetail?.cover})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundAttachment: 'fixed'
  }">
    <el-card>
      <div style="width: 400px;height: 300px">
        <div style="text-align: center">
          <h3>申请表</h3>
        </div>
        <el-form :model="eventJoinForm" label-width="80px">
          <el-form-item label="活动名称">
            {{ eventDetail?.title }}
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="eventJoinForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="eventJoinForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="eventJoinForm.email"></el-input>
          </el-form-item>
        </el-form>
        <el-form-item>
          <el-button type="primary" @click="joinEvent" style="width: 100%">报名</el-button>
        </el-form-item>
      </div>
    </el-card>
  </div>

</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import {useRoute,useRouter} from "vue-router";
import {reqAddEventParticipant, reqGetEventInfo, reqGetEventRemarkPage} from "@/api/social/event";
import type {SocEventRemark, EventDetailVO} from "@/api/social/event/type";
import {useUserStore} from "@/stores/user";


const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
// 数据相关
const eventDetail = ref<EventDetailVO>()
let eventJoinForm = reactive({
  phone: '',
  userName: '',
  email: '',
  eventId: route.query.eventId as number
})

const getEventDetail = () => {
  reqGetEventInfo(route.query.eventId as string).then(res => {
    eventDetail.value = res.data
  })
}

const joinEvent = () => {
  reqAddEventParticipant(eventJoinForm).then(res => {
    router.push({
      name: 'event-detail',
      query: {
        eventId: route.query.eventId
      }
    })
  })
}

// 初始化
onMounted(() => {
  getEventDetail();
});
</script>

<style scoped>

</style>

